<script setup lang="ts">
import { defineAsyncComponent, inject, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { AsyncComponent, Colon, DatePicker, Icon, IconRefresh, Image, Select } from '@xcan-angus/vue-ui';
import { Radio, RadioGroup, TabPane, Tabs } from 'ant-design-vue';
import { TESTER } from '@xcan-angus/infra';
import type { CreatorObjectType } from './types';
import { ProjectInfo } from '@/layout/types';

import DefaultAvatar from '../../assets/images/default.png';

import { useKanbanFilters } from './composables/useKanbanFilters';
import { useKanbanView } from './composables/useKanbanView';
import { useKanbanOptions } from './composables/useKanbanOptions';

const { t } = useI18n();

// external contexts
const projectInfo = inject<Ref<ProjectInfo>>('projectInfo', ref({} as ProjectInfo));
const proTypeShowMap = inject<Ref<{[key: string]: boolean}>>('proTypeShowMap', ref({ showTask: true, showSprint: true }));

// async components
const SelectCreatorModal = defineAsyncComponent(() => import('./SelectCreatorModal.vue'));
const DataView = defineAsyncComponent(() => import('@/views/kanban/dataAssets/index.vue'));
const EffectivenessView = defineAsyncComponent(() => import('@/views/kanban/effectiveness/index.vue'));
const EvaluationView = defineAsyncComponent(() => import('@/views/kanban/evaluation/index.vue'));
const CtoView = defineAsyncComponent(() => import('@/views/kanban/cto/index.vue'));

// view management
const { isMaximized, viewMode, dataViewRef, effectivenessRef, evaluationRef, ctoRef, refreshActive, toggleMaximize } = useKanbanView();

// filters and derived safe values
const {
  projectId,
  avatar,
  dateRange,
  creatorObjectType,
  creatorObjectId,
  creatorObjectName,
  countType,
  selectedSprintId,
  selectedPlanId,
  projectIdSafe,
  sprintIdSafe,
  planIdSafe,
  createdDateStartSafe,
  createdDateEndSafe,
  creatorObjectTypeSafe,
  creatorObjectIdSafe,
  clearCreator,
  setCreator
} = useKanbanFilters({ projectInfo });

// ui state
const creatorModalVisible = ref(false);
const openCreatorModal = () => { creatorModalVisible.value = true; };

// options
const { viewTypeOptions } = useKanbanOptions();

// react to product type visibility
watch(
  [() => proTypeShowMap.value, () => viewMode.value],
  () => {
    if (!proTypeShowMap.value.showTask || viewMode.value === 'evaluation') {
      countType.value = 'useCase';
    }
  },
  { immediate: true }
);
</script>
<template>
  <div class="px-5 pt-2 pb-5 h-full leading-5 text-3  overflow-y-auto bg-white" :class="{'fixed top-0 left-0 bottom-0 right-0 z-999': isMaximized}">
    <div class="flex items-center border px-2 py-1 rounded">
      <Image
        :src="avatar"
        :defaultImg="DefaultAvatar"
        class="w-10 h-10 rounded-full flex-shrink-0 mr-2.5" />
      <div class="flex items-center flex-1 flex-nowrap space-x-5">
        <div v-show="viewMode !== 'evaluation'" class="flex items-center space-x-1">
          <div class="flex items-center flex-shrink-0">
            <span class="flex-shrink-0 whitespace-nowrap">{{ t('kanban.organizationPersonnel') }}</span>
            <Colon class="mr-1 flex-shrink-0" />
            <div :title="creatorObjectName" class="truncate max-w-20 flex-shrink-0 whitespace-nowrap">
              {{ creatorObjectName || '--' }}
            </div>
          </div>
          <Icon
            v-show="!!creatorObjectName"
            icon="icon-cuowu"
            class="cursor-pointer text-text-link text-3.5 flex-shrink-0"
            @click="clearCreator" />
          <Icon
            v-show="!creatorObjectName"
            icon="icon-shuxie"
            class="cursor-pointer text-text-link text-3.5 flex-shrink-0"
            @click="openCreatorModal" />
        </div>

        <template v-if="['effectiveness', 'cto', 'evaluation'].includes(viewMode)">
          <div class="flex items-center flex-shrink-0">
            <div class="mr-1 flex-shrink-0">
              <span class="flex-shrink-0 whitespace-nowrap">{{ t('kanban.statisticsType') }}</span>
              <Colon />
            </div>
            <RadioGroup
              v-model:value="countType"
              name="countType"
              class="radio-group-small">
              <Radio v-if="proTypeShowMap.showTask && viewMode !== 'evaluation'" value="task">{{ t('common.issue') }}</Radio>
              <Radio value="useCase">{{ t('kanban.test') }}</Radio>
            </RadioGroup>
          </div>

          <Select
            v-show="countType === 'task' && proTypeShowMap.showSprint"
            v-model:value="selectedSprintId"
            class="w-45 flex-shrink-0"
            allowClear
            :disabled="!projectId"
            :fieldNames="{ value: 'id', label: 'name' }"
            :action="projectId ? `${TESTER}/task/sprint?projectId=${projectId}&fullTextSearch=true` : undefined"
            :placeholder="t('kanban.pleaseSelectSprint')" />

          <Select
            v-show="countType === 'useCase'"
            v-model:value="selectedPlanId"
            class="w-45 flex-shrink-0"
            allowClear
            :disabled="!projectId"
            :fieldNames="{ value: 'id', label: 'name' }"
            :action="projectId ? `${TESTER}/func/plan?projectId=${projectId}&fullTextSearch=true` : undefined"
            :placeholder="t('kanban.pleaseSelectPlan')" />
        </template>

        <div class="flex items-center flex-shrink-0">
          <span class="flex-shrink-0 whitespace-nowrap">{{ t('kanban.time') }}</span>
          <Colon class="mr-1 flex-shrink-0" />
          <DatePicker
            v-model:value="dateRange"
            showTime
            class="w-71 flex-shrink-0"
            type="date-range" />
        </div>
      </div>

      <div class="flex items-center flex-nowrap flex-shrink-0 space-x-2.5">
        <RadioGroup
          v-model:value="viewMode"
          size="small"
          optionType="button"
          buttonStyle="solid"
          class="child-px-2.5"
          :options="viewTypeOptions" />
        <IconRefresh class="text-4" @click="refreshActive" />
        <Icon
          class="text-4 cursor-pointer"
          :icon=" isMaximized ? 'icon-tuichuzuida' : 'icon-zuidahua' "
          @click="toggleMaximize" />
      </div>
    </div>

    <Tabs v-model:activeKey="viewMode" class="board_tab">
      <TabPane key="data">
        <DataView
          ref="dataViewRef"
          :onShow="viewMode === 'data'"
          :projectId="projectIdSafe"
          :createdDateStart="createdDateStartSafe"
          :createdDateEnd="createdDateEndSafe"
          :creatorObjectType="creatorObjectTypeSafe as CreatorObjectType"
          :creatorObjectId="creatorObjectIdSafe" />
      </TabPane>

      <TabPane key="effectiveness">
        <EffectivenessView
          ref="effectivenessRef"
          :onShow="viewMode === 'effectiveness'"
          :projectId="projectIdSafe"
          :countType="countType"
          :sprintId="sprintIdSafe"
          :planId="planIdSafe"
          :createdDateStart="createdDateStartSafe"
          :createdDateEnd="createdDateEndSafe"
          :creatorObjectType="creatorObjectTypeSafe as CreatorObjectType"
          :creatorObjectId="creatorObjectIdSafe" />
      </TabPane>

      <TabPane key="evaluation">
        <EvaluationView
          ref="evaluationRef"
          :onShow="viewMode === 'evaluation'"
          :planId="planIdSafe"
          :createdDateStart="createdDateStartSafe"
          :createdDateEnd="createdDateEndSafe"
          :projectId="projectIdSafe" />
      </TabPane>

      <TabPane key="cto">
        <CtoView
          ref="ctoRef"
          :onShow="viewMode === 'cto'"
          :projectId="projectIdSafe"
          :countType="countType"
          :sprintId="sprintIdSafe"
          :planId="planIdSafe"
          :createdDateStart="createdDateStartSafe"
          :createdDateEnd="createdDateEndSafe"
          :creatorObjectType="creatorObjectTypeSafe as CreatorObjectType"
          :creatorObjectId="creatorObjectIdSafe" />
      </TabPane>
    </Tabs>

    <AsyncComponent :visible="creatorModalVisible">
      <SelectCreatorModal v-model:visible="creatorModalVisible" @ok="setCreator" />
    </AsyncComponent>
  </div>
</template>
<style scoped>
:deep(.board_tab > .ant-tabs-nav) {
  display: none;
}

.radio-group-small :deep(.ant-radio-wrapper) {
  margin-right: 8px;
}

.radio-group-small :deep(.ant-radio-wrapper:last-child) {
  margin-right: 0;
}

.radio-group-small :deep(.ant-radio-wrapper) span.ant-radio+* {
  padding-right: 0;
}

.child-px-2\.5 :deep(.ant-radio-button-wrapper) {
  padding: 0 10px;
}

</style>
